<section>
  <header><h3>各种分页导航</h3></header>
  <article>
    <div class="example">
      <ul class="pager">
        <li class="previous"><a href="#">«</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li class="next"><a href="#">下一页 »</a></li>
      </ul>
      <ul class="pager">
        <li class="previous"><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager">
        <li class="previous"><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li class="active"><a href="#">5</a></li>
        <li><a href="###" data-toggle="pager" data-placement="bottom">更多</a></li>
        <li><a href="#">12</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="###" data-toggle="pager" data-placement="top" data-url="?page=%">Pager</a></li>
        <li><a href="#">6</a></li>
        <li class="active"><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
        <li><a href="#">12</a></li>
        <li class="next"><a href="#">下一页 »</a></li>
      </ul>
    </div>
    <pre><code>&lt;ul class=&quot;pager&quot;&gt;
  &lt;li class=&quot;previous&quot;&gt;&lt;a href=&quot;your/nice/url&quot;&gt;&laquo;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;your/nice/url&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;5&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;next&quot;&gt;&lt;a href=&quot;your/nice/url&quot;&gt;&raquo;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>禁用的导航</h3></header>
  <article>
    <div class="example">
      <ul class="pager">
        <li class="previous disabled"><a href="#">«</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li class="next disabled"><a href="#">下一页 »</a></li>
      </ul>
      <ul class="pager">
        <li class="previous disabled"><a href="#">«</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager">
        <li class="previous"><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li><a href="###" data-toggle="pager">Pager</a></li>
        <li><a href="#">118</a></li>
        <li><a href="#">119</a></li>
        <li><a href="#">1110</a></li>
        <li><a href="#">1111</a></li>
        <li class="active"><a href="#">12</a></li>
        <li class="next disabled"><a href="#">»</a></li>
      </ul>
      <br>
    </div>
    <pre><code>&lt;ul class=&quot;pager&quot;&gt;
  &lt;li class=&quot;previous <em>disabled</em>&quot;&gt;
    &lt;a href=&quot;your/nice/url&quot;&gt;&laquo;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class=&quot;next&quot;&gt;
    &lt;a href=&quot;your/nice/url&quot;&gt;&raquo;&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>圆角样式</h3></header>
  <article>
    <p><code>.pager-pills</code></p>
    <div class="example">
      <ul class="pager pager-pills">
        <li class="previous disabled"><a href="#">«</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager pager-pills">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li class="next disabled"><a href="#">下一页 »</a></li>
      </ul>
      <ul class="pager pager-pills">
        <li class="previous disabled"><a href="#">«</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager pager-pills">
        <li class="previous"><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">10</a></li>
        <li><a href="#">11</a></li>
        <li class="active"><a href="#">12</a></li>
        <li class="next disabled"><a href="#">»</a></li>
      </ul>
      <br>
    </div>
    <pre><code>&lt;ul class=&quot;pager <em>pager-pills</em>&quot;&gt;
  ...
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>宽松样式</h3></header>
  <article>
    <p><code>.pager-loose</code></p>
    <div class="example">
      <ul class="pager pager-loose">
        <li class="previous disabled"><a href="#">«</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager pager-loose">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li class="next disabled"><a href="#">下一页 »</a></li>
      </ul>
      <ul class="pager pager-loose">
        <li class="previous disabled"><a href="#">«</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager pager-loose">
        <li class="previous"><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">10</a></li>
        <li><a href="#">11</a></li>
        <li class="active"><a href="#">12</a></li>
        <li class="next disabled"><a href="#">»</a></li>
      </ul>
      <ul class="pager pager-loose pager-pills">
        <li class="previous disabled"><a href="#">«</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager pager-loose pager-pills">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li class="next disabled"><a href="#">下一页 »</a></li>
      </ul>
      <ul class="pager pager-loose pager-pills">
        <li class="previous disabled"><a href="#">«</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager pager-loose pager-pills">
        <li class="previous"><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">10</a></li>
        <li><a href="#">11</a></li>
        <li class="active"><a href="#">12</a></li>
        <li class="next disabled"><a href="#">»</a></li>
      </ul>
    </div>
    <pre><code>&lt;ul class=&quot;pager <em>pager-loose</em>&quot;&gt;
  ...
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>两端对齐</h3></header>
  <article>
    <p><code>.pager-justify</code></p>
    <div class="example">
      <ul class="pager pager-justify">
        <li class="previous disabled"><a href="#">«</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager pager-justify">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li class="next disabled"><a href="#">下一页 »</a></li>
      </ul>
      <ul class="pager pager-justify pager-pills">
        <li class="previous disabled"><a href="#">«</a></li>
        <li class="next"><a href="#">»</a></li>
      </ul>
      <ul class="pager pager-justify pager-pills">
        <li class="previous"><a href="#">« 上一页</a></li>
        <li class="next disabled"><a href="#">下一页 »</a></li>
      </ul>
    </div>
    <pre><code>&lt;ul class=&quot;pager <em>pager-justify</em>&quot;&gt;
  ...
&lt;/ul&gt;</code></pre>
  </article>
</section>

<script>
function afterPageLoad() {
    $('#pageContent').on('click', '.pager > li > a', function() {
        var $item = $(this).parent('li');
        $item.parent().children('.active').removeClass('active');
        if(!isNaN(parseInt($item.text()))) {
            $item.addClass('active');
        }
    });
}
</script>
